<template>
  <div class="app-container">
      <div class="right-detail">
            <div class="cbox">
              <el-form class="form" ref="flt" :rules="rules" :model="from" label-width="9rem" size="mini">
                <el-row :gutter="15" class="row">
                  <el-col :span="6">
                    <el-form-item label="箱型代码：">
                      <el-input   placeholder="请输入箱型代码" v-model="from.Code" style="width: 100%" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="中文名称：" prop="Name">
                        <el-input   placeholder="请输入中文名称" v-model="from.Name" style="width: 100%" clearable></el-input>
                        </el-form-item>
                  </el-col>

                  <el-col :span="2">
                    <el-form-item label-width="10px">
                      <el-button @click="searchType" type="primary">查询</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="top-type" ref="topType">
                  <div class="btn-area" ref="btnArea">
                    <el-button plain size="mini" type="success" @click="add">新增箱型</el-button>
                    <el-button plain size="mini" type="primary" @click="del('diong')">编辑箱型</el-button>
                    <el-button plain size="mini" type="danger" @click="examine">删除箱型</el-button>
                     <el-button plain size="mini" type="primary" @click="viewDetails">查看箱型</el-button>
                  </div>
                  <div class="table" ref="inner">
                  <el-table
                      :data="DetailedData"
                      border
                      :height="maxheight"
                      :header-cell-style="{ textAlign: 'center' }"
                      highlight-current-row
                      @row-dblclick='rowdbClick'
                      @row-click="rowClick">
                      <el-table-column type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                      <el-table-column prop="ctpCommcode" show-overflow-tooltip label="箱型代码"></el-table-column>
                      <el-table-column prop="ctpName" show-overflow-tooltip label="中文名称"></el-table-column>
                      <el-table-column prop="ctpInsertdt" show-overflow-tooltip label="创建时间"></el-table-column>
                      <el-table-column prop="ctpInsertuser" show-overflow-tooltip label="创建员工"></el-table-column>
                      <el-table-column prop="ctpLstupddt" show-overflow-tooltip label="最后修改时间"></el-table-column>
                      <el-table-column prop="ctpLstupduser" show-overflow-tooltip label="最后修改员工"></el-table-column>
                      <el-table-column prop="ctpIsvalid" show-overflow-tooltip label="是否有效">
                          <template slot-scope="scope">
                              <div style="text-align: center;" v-if="scope.row.ctpIsvalid == 'Y'">
                                <el-checkbox v-model="item.item" disabled></el-checkbox>
                              </div>
                              <div style="text-align: center;" v-if="scope.row.ctpIsvalid == 'N'">
                                <el-checkbox v-model="item.itemA" disabled></el-checkbox>
                              </div>
                          </template>
                      </el-table-column>
                  </el-table>
                  </div>
                    <!-- 分页 -->
                      <div class="pages">
                        <el-pagination
                          class="pagination"
                          small
                          background
                          ref="pagination"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="Pagination.currentPage"
                          :page-sizes="Pagination.pageSizeList"
                          :page-size="Pagination.pageSize"
                          :layout="Pagination.layout"
                          :total="Pagination.total"
                        ></el-pagination>
                      </div>
              </div>
        </div>
        <!-- 弹出框 新增 编辑 查看 -->
        <el-dialog
        v-el-drag-dialog
          :title='addText'
          :visible.sync="addShowA"
          v-if="addShowA"
          :close-on-click-modal="false">
              <el-form  label-width="10rem" :model="xzData"  ref="xzData"  size="mini" :rules="addRules">
                  <el-row>
                      <el-col :span="12">
                        <el-form-item prop="ctpCommcode" label="箱型代码：">
                          <el-input maxlength="2" minlength="2" v-model="xzData.ctpCommcode" :disabled="diong=='E'" clearable  @change="uppercase('ctpCommcode')"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="ctpName" label="中文名称：">
                          <el-input maxlength="32"  v-model="xzData.ctpName" clearable :disabled="!see"></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                      <el-col :span="12">
                        <el-form-item label="有效标志：" prop="ctpIsvalid">
                          <el-radio-group v-model="xzData.ctpIsvalid" :disabled="!see">
                            <el-radio label="Y" >是</el-radio>
                            <el-radio label="N">否</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                        <el-form-item prop="ctpRemark" label="备注：">
                          <el-input maxlength="32" type="textarea" v-model="xzData.ctpRemark" clearable :disabled="!see"></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
              </el-form>
               <div  class="dialog-footer">
                  <div class="btn">
                      <el-button type="primary" size="mini" v-if="see" @click="saveEditor('xzData')">保存</el-button>
                      <el-button size="mini" @click="close">关闭</el-button>
                  </div>
              </div>
        </el-dialog>
  </div>
</template>

<script>
import {GetCommonTypesCodeVa,AddContatinerCommonTypesModel,EditContatinerCommonTypesModel,DeleteContatinerCommonTypes} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
export default {
  mixins: [resizeMixin,paginationMixin],
  data(){
    return{
      from:{
        Code:'',
        Name:'',
      },
      listData:[
        {cCode:'1',
          cCName:'大龙站'},
      ],
      item:{
        item:true,
        itemA:false
      },
      maxheight:-1,
      diong:'E',
      addText:'',
      addShowA:false, // 新增 编辑
      see:true, //保存按钮
      DetailedData:[], //主列表的数据
      currentData:{},//单行数据
      xzData:[],// 传给新增 编辑弹出框的数据
      //表单验证 新增 编辑
      addRules:{
        ctpCommcode:[
          { required: true, message: '请填写箱型代码', trigger:'blur'}
        ],
        ctpName:[
          { required: true, message: '请填写中文名称', trigger:'blur'}
        ],
        ctpIsvalid:[{
          required: true, message: '请选择有效标志', trigger:'blur'
        }]
      },
    }
  },
  created(){
    this.resize=()=>{
      this.maxheight=this.$refs.inner.offsetHeight
    }
  },
  mounted(){
    this.refreshList()
  },
  methods:{
    uppercase(key) {
      this.xzData[key] = this.xzData[key].toUpperCase()
    },
    getList(currentPage, pageSize, updateTotal) {
      this.currentData = {}
      GetCommonTypesCodeVa({
        ctpCommcode:this.from.Code,
        ctpName:this.from.Name,
        PageIndexs: currentPage.toString(),
        PageSizes: pageSize.toString()
      }).then(response => {
        // if(response.success==1){
        this.DetailedData = response.data
        updateTotal(Number(response.total))
      })
    },
    // 点击搜索
    searchType(){
      this.$refs.flt.validate(valid=>{
        if(valid){
          this.getList(this.Pagination.currentPage,this.Pagination.pageSize,this.updatePaginationTotal)
        }
      })
    },
    //新增
    add(){
      this.addText='新增箱型信息'
      this.diong=''
      this.addShowA=true
      this.see=true
      this.xzData={
        ctpCommcode:'',
        ctpName:'',
        ctpIsvalid:'Y',
        ctpRemark:''
      }
    },
    //单击表格
    rowClick(row){
      this.currentData=Object.assign({},row)
    },
    //编辑
    del(){
      if(Object.keys(this.currentData).length===0){
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.addText='编辑箱型信息'
      this.diong='E'
      this.addShowA=true
      this.see=true
      this.xzData=Object.assign({},this.currentData)
    },
    //删除
    examine(){
      if(Object.keys(this.currentData).length===0){
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除此数据吗?', '提示', {
        closeOnClickModal: false
      }).then(()=>{
        DeleteContatinerCommonTypes(this.currentData.ctpCommcode).then(res=>{
          if(res.success=='1'){
            this.$message ({
              type: 'success',
              message: '删除成功'
            })
            this.close()
          }
        })
      }).catch(()=>{})

    },
    //双击查看
    rowdbClick(){
      // this.viewDetails()
    },
    // 点击查看详情
    viewDetails(){
      if(Object.keys(this.currentData).length==0){
        this.$alert('请选择需要查看的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.addText='查看箱型信息'
      this.diong='E'
      this.addShowA=true
      this.see=false
      this.xzData=Object.assign({},this.currentData)
    },

    //新增 编辑  点击保存
    saveEditor(xzData){
      this.$refs[xzData].validate((valid) => {
        if (valid) {
          if (this.diong ==='E') {
            EditContatinerCommonTypesModel(this.xzData).then(res=>{
              if(res.success=='1'){
                this.$message ({
                  type: 'success',
                  message: '编辑成功'
                })
              }
              this.close()
            })
            this.xzData = []
          }else{
            AddContatinerCommonTypesModel(this.xzData).then(res=>{
              if(res.success=='1'){
                this.$message ({
                  type: 'success',
                  message: '添加成功'
                })
              }
              this.close()
            })

            this.$refs[xzData].resetFields()
          }
        } else {
          return false
        }
      })
    },
    // 关闭弹出框
    close(){
      this.see=true
      this.addShowA=false
      this.currentData={}
      this.xzData={}
      this.refreshList() //刷新列表
    }
  }
}
</script>

<style  lang="scss" scoped>
.app-container {
  overflow: hidden;
  background-color: #fff;
  position: relative;
  height: 100%;
}
.right-detail {
  height:100%;
  .top-type {
    width: 100%;
    height: 94%;
    display:flex;
    flex-direction:column;
    .btn-area{
      padding: 0 0 10px 0;
    }
    .table {
      flex:1;
    }
    .pages{
      height:30px;
    }
  }
  .bottom-code {
    width: 100%;
    height: 100%;
  }
}

.dialog-footer {
    position: relative;
    width: 100%;
    height: 40px;
    .btn {
      position: absolute;
      right:15px;
    }
  }
  .block{
    float: left;
  }
</style>
